<template>
  <div>
    <x-header :left-options="{backText: ''}" @on-click-more="showMenus = true" >选择人群</x-header>
    <div class="ui-body">
      <group title="已选择" v-if="SelectedEmployeeNames.length">
        <div class="ui-choose-list">
          <div v-for="(item, index) in SelectedEmployeeNames">
              <div v-html="item"></div>
            <img src="../assets/images/inp_icon.png" style="width: 15px;position: absolute;top: 15px;right: 10px;cursor: pointer;" @click="deleteThis(index)">
          </div>
        </div>
      </group>
      <div>
        
      </div>
      <group title="全部">
        <div v-for="(item, index) in commonList" @click.native="changeAll">
          <cell :title="item.OrgName" is-link :border-intent="false" :arrow-direction="item.showC ? 'up' : 'down'" @click.native="showChild(item)">
            <check-icon :value="SelectedEmployeeIds.indexOf(item.OrgID) !== -1 ? true : false"  @click.stop.native="selectAll(item.OrgName,item.OrgID)" @on-change="change"></check-icon>
          </cell>
          <div v-for="(item1, index1) in item.ChildListOrgMail" style="margin-left: 10px;" v-if="item.showC">
            <cell :title="item1.OrgName" is-link :border-intent="false" :arrow-direction="item1.showC ? 'up' : 'down'" @click.native="showChild(item1)">
              <check-icon :value="SelectedEmployeeIds.indexOf(item1.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item1.OrgName,item1.OrgID)" @on-change="change"></check-icon>
            </cell>
            <div v-for="(item2, index2) in item1.ChildListOrgMail" style="margin-left: 10px;" v-if="item1.showC">
              <cell :title="item2.OrgName" is-link :border-intent="false" :arrow-direction="item2.showC ? 'up' : 'down'" @click.native="showChild(item2)">
                <check-icon :value="SelectedEmployeeIds.indexOf(item2.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item2.OrgName,item2.OrgID)" @on-change="change"></check-icon>
              </cell>
              <div v-for="(item3, index3) in item2.ChildListOrgMail" style="margin-left: 10px;" v-if="item2.showC">
                <cell :title="item3.OrgName" is-link :border-intent="false" :arrow-direction="item3.showC ? 'up' : 'down'" @click.native="showChild(item3)">
                  <check-icon :value="SelectedEmployeeIds.indexOf(item3.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item3.OrgName,item3.OrgID)" @on-change="change"></check-icon>
                </cell>
                <div v-for="(item4, index4) in item3.ChildListOrgMail" style="margin-left: 10px;" v-if="item3.showC">
                  <cell :title="item4.OrgName" is-link :border-intent="false" :arrow-direction="item4.showC ? 'up' : 'down'" @click.native="showChild(item4)">
                    <check-icon :value="SelectedEmployeeIds.indexOf(item4.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item4.OrgName,item4.OrgID)" @on-change="change"></check-icon>
                  </cell>
                  <div v-for="(item5, index5) in item4.ChildListOrgMail" style="margin-left: 10px;" v-if="item4.showC">
                    <cell :title="item1.OrgName" is-link :border-intent="false" :arrow-direction="item5.showC ? 'up' : 'down'" @click.native="showChild(item5)">
                      <check-icon :value="SelectedEmployeeIds.indexOf(item5.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item5.OrgName,item5.OrgID)" @on-change="change"></check-icon>
                    </cell>
                    <div v-for="(item6, index6) in item5.ChildListOrgMail" style="margin-left: 10px;" v-if="item5.showC">
                      <cell :title="item1.OrgName" is-link :border-intent="false" :arrow-direction="item6.showC ? 'up' : 'down'" @click.native="showChild(item6)">
                        <check-icon :value="SelectedEmployeeIds.indexOf(item6.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item6.OrgName,item6.OrgID)" @on-change="change"></check-icon>
                      </cell>
                      <div v-for="(item7, index7) in item6.ChildListOrgMail" style="margin-left: 10px;" v-if="item6.showC">
                        <cell :title="item1.OrgName" is-link :border-intent="false" :arrow-direction="item7.showC ? 'up' : 'down'" @click.native="showChild(item7)">
                          <check-icon :value="SelectedEmployeeIds.indexOf(item7.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item7.OrgName,item7.OrgID)" @on-change="change"></check-icon>
                        </cell>
                        <div v-for="(item8, index8) in item7.ChildListOrgMail" style="margin-left: 10px;" v-if="item7.showC">
                          <cell :title="item8.OrgName" is-link :border-intent="false" :arrow-direction="item8.showC ? 'up' : 'down'" @click.native="showChild(item8)">
                            <check-icon :value="SelectedEmployeeIds.indexOf(item8.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item8.OrgName,item8.OrgID)" @on-change="change"></check-icon>
                          </cell>
                          <div v-for="(item9, index9) in item8.ChildListOrgMail" style="margin-left: 10px;" v-if="item8.showC">
                            <cell :title="item9.OrgName" is-link :border-intent="false" :arrow-direction="item9.showC ? 'up' : 'down'" @click.native="showChild(item9)">
                              <check-icon :value="SelectedEmployeeIds.indexOf(item9.OrgID) !== -1 ? true : false" @click.stop.native="selectAll(item9.OrgName,item9.OrgID)" @on-change="change"></check-icon>
                            </cell>
                            <cell :title="child.value + '(' + item9.OrgName  + ')'" is-link  v-for="child in item9.ListMail" v-if="item9.ListMail.length && item9.showC">
                              <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                            </cell>
                          </div>
                          <cell :title="child.value + '(' + item8.OrgName  + ')'" is-link  v-for="child in item8.ListMail" v-if="item8.ListMail.length && item8.showC">
                            <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1  ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                          </cell>
                        </div>
                        <cell :title="child.value + '(' + item7.OrgName  + ')'" is-link  v-for="child in item7.ListMail" v-if="item7.ListMail.length && item7.showC">
                          <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                        </cell>
                      </div>
                      <cell :title="child.value + '(' + item6.OrgName  + ')'" is-link  v-for="child in item6.ListMail" v-if="item6.ListMail.length && item6.showC">
                        <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                      </cell>
                    </div>
                    <cell :title="child.value + '(' + item5.OrgName  + ')'" is-link  v-for="child in item5.ListMail" v-if="item5.ListMail.length && item5.showC">
                      <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                    </cell>
                  </div>
                  <cell :title="child.value + '(' + item4.OrgName  + ')'" is-link  v-for="child in item4.ListMail" v-if="item4.ListMail.length && item4.showC">
                    <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                  </cell>
                </div>
                <cell :title="child.value + '(' + item3.OrgName  + ')'" is-link  v-for="child in item3.ListMail" v-if="item3.ListMail.length && item3.showC">
                  <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
                </cell>
              </div>
              <cell :title="child.value + '(' + item2.OrgName  + ')'" is-link  v-for="child in item2.ListMail" v-if="item2.ListMail.length && item2.showC">
                <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
              </cell>
            </div>
            <cell :title="child.value + '(' + item1.OrgName  + ')'" is-link  v-for="child in item1.ListMail" v-if="item1.ListMail.length && item1.showC">
              <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1  ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
            </cell>
          </div>
          <cell :title="child.value + '(' + item.OrgName  + ')'" is-link  v-for="child in item.ListMail" v-if="item.ListMail.length && item.showC">
            <check-icon :value="SelectedEmployeeIds.indexOf(child.key) !== -1 ? true : false"  @click.stop.native="selectAll(child.value,child.key)" @on-change="change"></check-icon>
          </cell>
        </div>
        
      </group>
      <box gap="10px 20px">
        <x-button  type="primary" link="BACK" style="margin-top: 20px;">确定</x-button>
      </box>
    </div>
  </div>
</template>

<script>
import { Group, Cell, XHeader, Checklist, XButton, Box, CheckIcon } from 'vux'
import store from '@/store'
import axios from 'axios'
require('es6-promise').polyfill()
var qs = require('qs')

export default {
  store,
  components: {
    Group,
    Cell,
    XHeader,
    Checklist,
    XButton,
    Box,
    CheckIcon
  },
  data () {
    return {
      commonList: [],
      SelectedEmployeeIds: [],
      SelectedEmployeeNames: [],
      index: -1
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.commonList = vm.$store.state.commonList
      vm.SelectedEmployeeIds = vm.$store.state.SelectedEmployeeIds
      vm.init()
    })
  },
  mounted () {
  },
  methods: {
    changeAll () {
      let commonList = this.commonList
      this.commonList = []
      this.commonList = commonList
    },
    selectAll (name, key) {
      if (this.SelectedEmployeeIds.indexOf(key) === -1) {
        this.SelectedEmployeeIds = [...new Set([...this.SelectedEmployeeIds, key])]
        this.SelectedEmployeeNames = [...new Set([...this.SelectedEmployeeNames, name])]
      } else {
        this.SelectedEmployeeIds.splice(this.SelectedEmployeeIds.indexOf(key), 1)
        this.SelectedEmployeeNames.splice(this.SelectedEmployeeIds.indexOf(key), 1)
      }
      this.dataInit()
    },
    selectOne (index) {
      this.index = index
    },
    deleteThis (index) {
      this.SelectedEmployeeIds.splice(index, 1)
      this.SelectedEmployeeNames.splice(index, 1)
    },
    change (val) {
      if (this.index === -1) return
      if ((val.length !== this.commonList[this.index].childList.length)) {
        this.commonList[this.index].isSelect = false
      } else {
        this.commonList[this.index].isSelect = true
        this.SelectedEmployeeIds = [...new Set([...this.SelectedEmployeeIds, this.commonList[this.index].key])]
      }
      this.dataInit()
    },
    dataInit () {
      let childItem = function (item) {
        if (this.SelectedEmployeeIds.indexOf(item.OrgID) !== -1) {
          for (let item1 in item.ChildListOrgMail) {
            if (item1.ChildListOrgMail.length !== 0) {
              childItem(item1)
            }
            if (this.SelectedEmployeeIds.indexOf(item1.OrgID) !== -1) {
              this.SelectedEmployeeIds.splice(this.SelectedEmployeeIds.indexOf(item1.OrgID), 1)
              this.SelectedEmployeeNames.splice(this.SelectedEmployeeIds.indexOf(item1.OrgID), 1)
            }
          }
        }
      }
    },
    showChild (item) {
      if (!item.showC) {
        item['showC'] = true
      } else {
        item.showC = !item.showC
      }
      console.log(item)
      if (item.ListMail.length === 0) {
        this.$vux.loading.show({
          text: item.OrgName + '人员获取中...'
        })
        let enterpriseid = document.getElementById('EnterpriseID').value
        axios.post(this.$store.state.url + '/handler/AddressBookService.ashx', qs.stringify({enterpriseid: enterpriseid, type: 'getEmployee', orgID: item.OrgID, choosesendout: ''}))
        .then((rs) => {
          let data = rs.data
          if (data.status === 200) {
            for (let item1 of data.message) {
              item.ListMail.push({key: item1.ID, value: item1.EmployeeeName, partName: item.OrgName})
              this.changeAll()
            }
          } else {
            this.$vux.toast.text(data.msg, 'bottom')
          }
          this.$vux.loading.hide()
        })
        .catch((response) => {
          this.$vux.loading.hide()
          this.$vux.toast.text('请求失败请稍后再试', 'bottom')
        })
      }
      this.changeAll()
    },
    init () {
      console.log(this.commonList.length)
      if (this.commonList.length !== 0) {
        return
      }
      this.$vux.loading.show({
        text: '数据加载中...'
      })
      let enterpriseid = document.getElementById('EnterpriseID').value || 'F9E7D8E6-32C8-43D2-8017-3BF0FAB2733B'
      axios.post(this.$store.state.url + '/handler/AddressBookService.ashx', qs.stringify({enterpriseid: enterpriseid, type: 'onlyOrg', appid: ''}))
      .then((rs) => {
        let data = rs.data
        if (data.status === 200) {
          console.log(data.message)
          this.commonList = data.message
        } else {
          this.$vux.toast.text(data.msg, 'bottom')
        }
        this.$vux.loading.hide()
      })
      .catch((response) => {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
        this.$vux.loading.hide()
      })
    }
  }
}
</script>

<style scoped>
  .ui-choose-list{
    background-color: white;
  }
  .ui-choose-list > div{
    position: relative;
    padding: 10px 30px 10px 10px;
    display: inline-block;
    height: 100%;
  }
</style>
